<script setup>
import {nextTick, onMounted, ref} from "vue";
import request from "@/assets/js/mobileRequest";
import {currentUser} from "@/App.vue";
import qs from "qs";

const onClickLeft = () => history.back();
const value = ref(3);
const message = ref();

const avatar = ref([]);

const userInfo = ref({
  username:'test',
  description:'吾心吾行澄如明镜，所作所为皆是正义。吾心吾行澄如明镜，所作所为皆是正义。',
  level: 10,
  gender: '男',
  avatarImgUrl:'',
  userId:''
});

const orderCards = ref({});

const orderStatus = ref(false);

let imgUrls = [];//准备数组用来存储多张图片路径

const uploadAvatar = (file) => {
  console.log(file)
  let avatar = {file:file.file}
  request({
    method: "post",
    url: BASE_URL + '/v1/file/upload',
    data: avatar,
    headers: {'Content-Type': 'multipart/form-data'}
  }).then(res => {
    if (res.data.code === 2000) {
      console.log(res.data.data);
      imgUrls.push(res.data.data);
    }
  })
};

const onSubmit = ()=>{
  orderCards.value.commentImgUrl = imgUrls.toString();
  orderCards.value.orderStatus = '已完成';
  console.log(orderCards.value);
  updateOrder();
}

const updateOrder = ()=>{
  let data = qs.stringify(orderCards.value);
  console.log(data);
  request.post(BASE_URL + '/v1/order/insert', data).then((response) => {
    if (response.data.code === 2000) {
    }
  })
}

onMounted(() => {
  let id = new URLSearchParams(location.search).get('orderId')
  console.log(id);
  request.get(BASE_URL + "/v1/order/select?orderId=" + id).then((response) => {
    if (response.data.code == 2000) {
      orderCards.value = response.data.data[0];
      if(orderCards.value.orderRate!=null || orderCards.value.orderRate !='')
      {
        orderStatus.value = true;
      }
      nextTick(() => {
        userInfo.value = currentUser.value;
        console.log(userInfo.value);
        console.log(orderCards.value);
      })
    }
  })
})
</script>

<template>
  <div style="background-color: #f7f8fa">
    <van-nav-bar
        title="订单评价"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
    />
    <van-cell-group style="text-align: left;">
      <van-cell title="订单信息" style="font-weight: bold;"/>
      <van-cell title="订单标题" :value="orderCards.orderTitle" />
      <van-cell title="订单类型" :value="'校园派'+orderCards.orderType+'服务'" />
      <van-cell title="订单号" :value="orderCards.orderId" />
      <van-cell title="支付时间" :value="orderCards.creationTime" />
    </van-cell-group>
    <br>
    <van-form @submit="onSubmit" v-if="orderCards.orderStatus == '待评价'">
    <van-cell-group inset>
      <van-cell title="您觉得本次订单如何:" inert style="font-weight: bold;"/>
      <van-rate style="margin-left: 30%" v-model="orderCards.orderRate" allow-half size="10px;"/>
      <van-field
          v-model="orderCards.orderReview"
          rows="2"
          autosize
          required
          label="评论描述"
          type="textarea"
          maxlength="50"
          placeholder="请输入描述"
          show-word-limit
      />
    </van-cell-group>
      <van-cell-group inset>
        <van-cell title="上传照片" inert style="font-weight: bold;"/>
        <van-field name="uploader" label="图片上传">
          <template #input>
            <van-uploader v-model="avatar" :max-count="1" reupload :after-read="uploadAvatar"/>
          </template>
        </van-field>
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>
    <van-cell-group style="text-align: left;" v-else>
      <van-cell title="评价详情" style="font-weight: bold;"/>
      <van-rate style="margin-left: 30%" v-model="orderCards.orderRate" allow-half size="10px;"/>
      <van-cell title="评价" :label="orderCards.orderReview" />
      <van-image
          v-if="orderCards.commentImgUrl!=null"
          width="100"
          height="100"
          :src="BASE_URL+'/original'+url"
          v-for="url in orderCards.commentImgUrl.split(',')"
      />
    </van-cell-group>
  </div>
</template>

<style scoped>

</style>